<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blockchain</title>
    <style>
        .space{
            display:inline-block;
            right:0;
            margin-right: 300px;
            color:blue
        }
    </style>
</head>
<body>
    <h1>Welcome to blockchain!</h1>

    <div>
        <button class="search">query</button>
        <div>
            <ul>
                <li><span>A:</span><span class="AValue"></span></li>
                <li><span>B:</span><span class="BValue"></span></li>
            </ul>
        </div>
    </div>

    <div>
        <button class="transmit">transmit</button>
        <div>
            <h5>A => B transaction_id is ：</h5>
            <div class="transmitResult"></div>
        </div>
    </div>



    <!--<div>-->
        <!--<button class="login">login</button>-->
        <!--<div>-->
            <!--<h5>loginResult：</h5>-->
            <!--<div class="loginResult"></div>-->
        <!--</div>-->
    <!--</div>-->
    <div>
        <button class="queryBlockByTransactionid">queryBlockByTransactionid</button>
        <div>
            <h5>queryBlockByTransactionidResult：</h5>
            <div class="queryBlockByTransactionidResult">
                <h5>Before is Blockinfo.</h5>
            </div>
        </div>
    </div>

    <div>
        <button class="queryMultiproperty">queryMultiproperty</button>
        <ul>
            <li><span>title:</span><span class="space title"></span></li>
            <li><span>content:</span><span class="space content"></span></li>
            <li><span>originalcountry:</span><span class="space originalcountry"></span></li>
            <li><span>cost:</span><span class="space cost"></span></li>
            <li><span>price:</span><span class="space price"></span></li>
            <li><span>author:</span><span class="space author"></span></li>
            <li><span>category:</span><span class="space category"></span></li>
            <li><span>id:</span><span class="space id"></span></li>
            <li><span>labels:</span><span class="space labels"></span></li>
            <li><span>originalid:</span><span class="space originalid"></span></li>
            <li><span>publishtime:</span><span class="space publishtime"></span></li>
            <li><span>sourceid:</span><span class="space sourceid"></span></li>
            <li><span>strat_num:</span><span class="space strat_num"></span></li>
            <li><span>updatetime:</span><span class="space updatetime"></span></li>
        </ul>
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

    <script>

        var transaction_id ;
        var blocks = [];

        $(".search").click(function(){

                $.post("/search","",function(result){

                    console.log(result);
                    $(".AValue").html(result.result[0]);
                    $(".BValue").html(result.result[1]);
                });
        });

        $(".transmit").click(function(){
            $.post("/arrangeClasses","",function(result){
                console.log(result);
                transaction_id = result.result ;
                $(".transmitResult").html(result.result);
            });
        });

        $(".login").click(function(){
            // console.log(4);
            $.post("/login","",function(result){
                console.log(result);
                // $(".transmitResult").html((new Date())+" "+result.result);
            });
        });

        $(".queryBlockByTransactionid").click(function(){

            $.post("/queryBlockByTransactionid",{"transactionId" : transaction_id},function(result){
                console.log(result);
                var blockInfo = result.result.header ;
                var valueInfoA = result.result.data.data[0].payload.data.actions[0].payload
                    .action.proposal_response_payload
                    .extension
                    .results
                    .ns_rwset[1]
                    .rwset
                    .writes[0]
                    .value;
                var valueInfoB = result.result.data.data[0].payload.data.actions[0].payload
                    .action.proposal_response_payload
                    .extension
                    .results
                    .ns_rwset[1]
                    .rwset
                    .writes[1]
                    .value;
                // blocks.unshift(blockInfo);
                $(".queryBlockByTransactionidResult").first().before("<ul><li><span>blocknumber:"+
                    blockInfo.number+
                    "</span></li><li><span>data-hash:"+
                    blockInfo.data_hash+
                    "</span></li><li><span>A : "+
                    valueInfoA+"    "+
                    "</span><span>B : "+
                    valueInfoB+"    "+
                    "</li></ul>"
            );
                // list show

                // $(".transmitResult").html((new Date())+" "+result.result);
            });
        });

        $(".queryMultiproperty").click(function(){
            $.post("/queryMultiproperty","",function(result){
                console.log(result.result);
                var properties = JSON.parse(result.result);
                console.log( properties );
                $(".title").html(properties.title);
                $(".content").html(properties.content);
                $(".originalcountry").html(properties.originalcountry);
                $(".cost").html(properties.cost_num);
                $(".price").html(properties.price_num);
                $(".author").html(properties.country);
                $(".category").html(properties.category);
                $(".id").html(properties.id);
                $(".originalid").html(properties.originalid);
                $(".publishtime").html(properties.publishtime);
                $(".sourceid").html(properties.sourceid);
                $(".strat_num").html(properties.strat_num);
                $(".updatetime").html(properties.updatetime);
            })
        });

    </script>

</body>
</html>